<template>
  <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">
      <!--      <el-form-item v-if="title !== '编辑'" label="库位" prop="id">-->
      <el-form-item label="库位" prop="id">
        <el-cascader
          v-model="form.id"
          placeholder="请选择库位"
          :options="selectData"
          :props="{ checkStrictly: true }"
          clearable
          filterable
          :children="10"
          :disabled="true"
          @change="ck_config($event)"
        />
      </el-form-item>
      <el-form-item label="数据状态" prop="isstatus">
        <el-switch v-model="form.isstatus" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="0" />
      </el-form-item>
      <el-form-item v-if="change" label="库位功能" prop="change_id">
        <el-radio v-model="radio" label="1">存储</el-radio>
        <el-radio v-if="ifAdmain" v-model="radio" label="2">隔离</el-radio>
        <el-radio v-if="ifAdmain" v-model="radio" label="3">暂放</el-radio>
      </el-form-item>
      <!-- {{ form.id }} -->
      <el-form-item prop="name">
        <span slot="label">
          库位名称
        </span>
        <el-input v-model="form.name" />
      </el-form-item>

      <template v-if=" JSON.stringify(form.id) === '[0]' || (title === '编辑' && form._level === 1 )">
        <el-form-item>
          <span slot="label">
            库位地址
          </span>
          <el-input v-model="form.address_description" />
        </el-form-item>
        <el-form-item>
          <span slot="label">
            联系人姓名
          </span>
          <el-input v-model="form.realation_name" />
        </el-form-item>
        <el-form-item>
          <span slot="label">
            联系人手机号
          </span>
          <el-input v-model="form.relation_phone" />
        </el-form-item>
      </template>

      <template v-if="2 == configLevel(form.id)">

        <el-form-item>
          <span slot="label">
            最大承重
          </span>
          <el-input v-model="form.max_load_weight" />
        </el-form-item>
        <el-form-item>
          <span slot="label">
            最大长度
          </span>
          <el-input v-model="form.max_load_length" />
        </el-form-item>
        <el-form-item>
          <span slot="label">
            最大宽度
          </span>
          <el-input v-model="form.max_load_width" />
        </el-form-item>
        <el-form-item>
          <span slot="label">
            最大高度
          </span>
          <el-input v-model="form.max_load_height" />
        </el-form-item>
      </template>

      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
          <el-button size="medium" @click="close()">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { locationAdd, locationEdit } from '@/api/stock'
export default {
  name: 'AddEdit',
  props: {
    open: {
      type: Boolean
    },
    form: {
      type: Object
    },
    title: {
      type: String
    },
    selectData: {
      type: Array
    },
    addConfigLevel: {
      type: Number
    }
  },
  data() {
    return {
      radio: '1',
      change: false,
      ifAdmain: false,
      rules: {
        name: [
          { required: true, message: '请输入库位名称', trigger: 'blur' }
        ],
        id: [
          { required: true, message: '请选择库位', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    'form.id'(newValue, oldValue) {
      console.log(newValue, oldValue)
    },
    open(val) {
      if (val) {
        // 获取vue 里 state 里的值
        const Array = this.$store.state.user.roles
        Array.forEach(item => {
          if (item === 'admin') {
            this.ifAdmain = true
          } else if (item === 'admin1') {
            this.ifAdmain = true
          } else if (item === 'wms') {
            this.ifAdmain = true
          } else {
            this.ifAdmain = false
          }
        })
      }
    }
  },
  methods: {
    configLevel(val) {
      if (undefined === val) return
      return val.length
    },
    ck_config(event) {
      // console.log(event)
      if (event[1]) {
        this.change = true
      } else {
        this.change = false
      }
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(that.title)
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      const user = this.$store.state.user
      const info = {
        tenant_id: user.tenant_id,
        parent_id: this.form.id[this.form.id.length - 1],
        name: this.form.name,
        realation_name: this.form.realation_name,
        relation_phone: this.form.relation_phone,
        isstatus: this.form.isstatus,
        usage: this.radio,
        // tenant_id: this.$store.state.user.tenant_id,
        max_load_weight: this.form.max_load_weight,
        address_description: this.form.address_description,
        max_load_length: this.form.max_load_length,
        max_load_width: this.form.max_load_width,
        max_load_height: this.form.max_load_height
      }
      // console.log('info', info)
      // return
      locationAdd(info).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    edit() {
      const that = this
      let pid = ''
      if (this.form.id.length === undefined) {
        pid = this.form.id
      } else {
        pid = this.form.id[this.form.id.length - 1]
      }
      const info = {
        id: pid,
        // id: this.form.ids,
        parent_id: this.form.parent_id,
        name: this.form.name,
        realation_name: this.form.realation_name,
        relation_phone: this.form.relation_phone,
        isstatus: this.form.isstatus,
        address_description: this.form.address_description
      }
      // console.log('info', info, this.form)
      // return
      locationEdit(info).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
    }
  }
}
</script>

